<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            style="float:right"
            type="primary"
            @click="handleSearchList()"
            size="small">
          查询搜索
        </el-button>
        <el-button
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()"
            size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" label-suffix="：" label-width="auto" size="small">
          <el-form-item label="配置名称">
            <el-input clearable v-model="listQuery.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select clearable filterable v-model="listQuery.type" style="width:100%">
              <el-option label="单选" value="0"></el-option>
              <el-option label="多选" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示形式">
            <el-select clearable filterable v-model="listQuery.showAsTag" style="width:100%">
              <el-option label="文本" value="0"></el-option>
              <el-option label="tag" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button type="warning" size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">
        添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table :data="list"
                style="width: 100%;"
                v-loading="listLoading" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand"
                     style="background-color: #eeeeee4f">
              <el-form-item label="选项值: ">
                <!--                                <div style="white-space: pre-wrap;">{{ scope.row.showSelectOption }}</div>-->
                <div style="text-align: center;width: 60%">
                  <div style="display: flex">
                    <div style="flex: 1">数据值</div>
                    <div style="flex: 1;margin-left: 10px">显示名称</div>
                    <div style="flex: 1;margin-left: 10px" v-if="scope.row.showAsTag == '1'">
                      tag颜色
                    </div>
                    <div style="flex: 1;margin-left: 10px" v-if="scope.row.showAsTag == '1'">
                      颜色预览
                    </div>
                  </div>
                  <div style="display: flex"
                       v-for="item in JSON.parse(scope.row.showSelectOption?scope.row.showSelectOption:{})">
                    <el-input disabled v-model="item.value" size="mini" style="flex: 1"></el-input>
                    <el-input disabled v-model="item.label" size="mini" style="flex: 1;margin-left: 10px"></el-input>

                    <el-select disabled v-model="item.color" size="mini" style="flex: 1;margin-left: 10px"
                               v-if="scope.row.showAsTag == '1'">
                      <el-option label="蓝色" value="primary"></el-option>
                      <el-option label="红色" value="danger"></el-option>
                      <el-option label="绿色" value="success"></el-option>
                      <el-option label="橙色" value="warning"></el-option>
                      <el-option label="灰色" value="info"></el-option>
                    </el-select>

                    <el-tag :type="item.color" style="flex: 1;margin-left: 10px"
                            v-if="scope.row.showAsTag == '1'">{{ item.label }}
                    </el-tag>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="配置名称" align="center" prop="name" show-overflow-tooltip/>
        <el-table-column label="类型" align="center" prop="type">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'" type="success">单选</el-tag>
            <el-tag v-if="scope.row.type == '1'" type="primary">多选</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="展示形式" align="center" prop="showAsTag">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showAsTag == '0'" type="warning">文本</el-tag>
            <el-tag v-if="scope.row.showAsTag == '1'" type="primary">tag</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="详细描述" align="center" prop="desc" show-overflow-tooltip/>

        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.current"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog title="编辑表字段映射字典"
               :visible.sync="editDialogVisible" @close="handleDialogClose('editDialogRef')"
               width="60%">
      <el-form :model="projectTableFiledConfigPre" label-suffix="："
               :rules="formRule" ref="editDialogRef"
               label-width="auto" size="small">
        <el-form-item label="配置名称">
          <el-input show-word-limit maxlength="32" :clearable="false"
                    v-model="projectTableFiledConfigPre.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select clearable filterable v-model="projectTableFiledConfigPre.type" style="width:100%">
            <el-option label="单选" value="0"></el-option>
            <el-option label="多选" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示形式">
          <el-select clearable filterable v-model="projectTableFiledConfigPre.showAsTag" style="width:100%">
            <el-option label="文本" value="0"></el-option>
            <el-option label="tag" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项值">
          <div style="text-align: center;width: 60%">
            <div style="display: flex">
              <div style="flex: 1">数据值</div>
              <div style="flex: 1;margin-left: 10px">显示名称</div>
              <div style="flex: 1;margin-left: 10px" v-if="projectTableFiledConfigPre.showAsTag == '1'">
                tag颜色
              </div>
              <div style="flex: 1;margin-left: 10px" v-if="projectTableFiledConfigPre.showAsTag == '1'">
                颜色预览
              </div>
              <div style="flex: 1">
                <el-button icon="el-icon-plus" size="mini" type="primary"
                           @click="addShowSelectOptionEdit">添加
                </el-button>
              </div>
            </div>
            <div style="display: flex" v-for="item in showSelectOptionEdit">
              <el-input v-model="item.value" size="mini" style="flex: 1"></el-input>
              <el-input v-model="item.label" size="mini" style="flex: 1;margin-left: 10px"></el-input>

              <el-select v-model="item.color" size="mini" style="flex: 1;margin-left: 10px"
                         v-if="projectTableFiledConfigPre.showAsTag == '1'">
                <el-option label="蓝色" value="primary"></el-option>
                <el-option label="红色" value="danger"></el-option>
                <el-option label="绿色" value="success"></el-option>
                <el-option label="橙色" value="warning"></el-option>
                <el-option label="灰色" value="info"></el-option>
              </el-select>

              <el-tag :type="item.color" style="flex: 1;margin-left: 10px"
                      v-if="projectTableFiledConfigPre.showAsTag == '1'">{{ item.label }}
              </el-tag>

              <div style="flex: 1;">
                <el-button icon="el-icon-minus" size="mini" type="danger"
                           @click="deleteShowSelectOptionEdit(item)">删除
                </el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详细描述">
          <el-input show-word-limit maxlength="1024" clearable v-model="projectTableFiledConfigPre.desc"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增表字段映射字典"
               :visible.sync="addDialogVisible" @close="handleDialogClose('addDialogRef')"
               width="60%">
      <el-form :model="projectTableFiledConfigPre" label-suffix="："
               :rules="formRule" ref="addDialogRef"
               label-width="auto" size="small">
        <el-form-item label="配置名称">
          <el-input show-word-limit maxlength="32" :clearable="false"
                    v-model="projectTableFiledConfigPre.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select clearable filterable v-model="projectTableFiledConfigPre.type" style="width:100%">
            <el-option label="单选" value="0"></el-option>
            <el-option label="多选" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示形式">
          <el-select clearable filterable v-model="projectTableFiledConfigPre.showAsTag" style="width:100%">
            <el-option label="文本" value="0"></el-option>
            <el-option label="tag" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项值">
          <div style="text-align: center;width: 60%">
            <div style="display: flex">
              <div style="flex: 1">数据值</div>
              <div style="flex: 1;margin-left: 10px">显示名称</div>
              <div style="flex: 1;margin-left: 10px" v-if="projectTableFiledConfigPre.showAsTag == '1'">
                tag颜色
              </div>
              <div style="flex: 1;margin-left: 10px" v-if="projectTableFiledConfigPre.showAsTag == '1'">
                颜色预览
              </div>
              <div style="flex: 1">
                <el-button icon="el-icon-plus" size="mini" type="primary"
                           @click="addShowSelectOptionEdit">添加
                </el-button>
              </div>
            </div>
            <div style="display: flex" v-for="item in showSelectOptionEdit">
              <el-input v-model="item.value" size="mini" style="flex: 1"></el-input>
              <el-input v-model="item.label" size="mini" style="flex: 1;margin-left: 10px"></el-input>

              <el-select v-model="item.color" size="mini" style="flex: 1;margin-left: 10px"
                         v-if="projectTableFiledConfigPre.showAsTag == '1'">
                <el-option label="蓝色" value="primary"></el-option>
                <el-option label="红色" value="danger"></el-option>
                <el-option label="绿色" value="success"></el-option>
                <el-option label="橙色" value="warning"></el-option>
                <el-option label="灰色" value="info"></el-option>
              </el-select>

              <el-tag :type="item.color" style="flex: 1;margin-left: 10px"
                      v-if="projectTableFiledConfigPre.showAsTag == '1'">{{ item.label }}
              </el-tag>

              <div style="flex: 1;">
                <el-button icon="el-icon-minus" size="mini" type="danger"
                           @click="deleteShowSelectOptionEdit(item)">删除
                </el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详细描述">
          <el-input show-word-limit maxlength="1024" clearable v-model="projectTableFiledConfigPre.desc"
                    type="textarea" autosize placeholder="请输入"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAddDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>


    <user-component :visible="userSelectVisible" @close="userSelectVisible =false"
                    @onSelect="onComponentSelect"></user-component>
  </div>
</template>
<script>
import {projectTableFiledConfigPrePostRequire} from '@/api/projectTableFiledConfigPre';

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  name: undefined,
  type: undefined,
  showAsTag: undefined,
  user: {},
}
const defaultProjectTableFiledConfigPre = {
  createTime: undefined,
  name: undefined,
  updateTime: undefined,
  id: undefined,
  type: '0',
  showAsTag: '1',
  user: {},
  showSelectOption: undefined,
  desc: undefined,
}
export default {
  name: 'projectTableFiledConfigPreList',
  data() {
    return {
      componentSelectFromSearch: false,
      componentSelectField: '',
      componentAssociationField: '',
      componentAssociationTable: '',
      componentAssociationShowName: '',
      userSelectVisible: false,

      showSelectOptionEdit: [],

      formRule: {

        name: [{required: true, message: "请输入配置名称", trigger: 'blur'}],
      },
      listQuery: this.$deepClone(defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      projectTableFiledConfigPre: this.$deepClone(defaultProjectTableFiledConfigPre),
    }
  },
  created() {
    this.getList()
  },
  methods: {
    addShowSelectOptionEdit() {
      this.showSelectOptionEdit.push({color: 'primary'})
    },
    deleteShowSelectOptionEdit(item) {
      let arr = this.showSelectOptionEdit || []
      let deleteIndex = -1
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value == item.value && arr[i].label == item.label) {
          deleteIndex = i
          break
        }
      }
      if (deleteIndex >= 0) {
        arr.splice(deleteIndex, 1);
      }
      this.showSelectOptionEdit = arr
    },
    showComponent(isSearch, sField, aTable, aField, aShowName) {
      this[aTable + "SelectVisible"] = true;
      this.componentSelectFromSearch = isSearch
      this.componentSelectField = sField
      this.componentAssociationField = aField
      this.componentAssociationTable = aTable
      this.componentAssociationShowName = aShowName
    },
    onComponentSelect(data) {
      if (this.componentSelectFromSearch) {
        this.listQuery[this.componentSelectField] = data[this.componentAssociationField]
        let json = this.listQuery[this.componentAssociationTable] || {}
        json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
        this.listQuery[this.componentAssociationTable] = json
      } else {
        this.projectTableFiledConfigPre[this.componentSelectField] = data[this.componentAssociationField]
        let json = this.projectTableFiledConfigPre[this.componentAssociationTable] || {}
        json[this.componentAssociationShowName] = data[this.componentAssociationShowName]
        this.projectTableFiledConfigPre[this.componentAssociationTable] = json
      }
    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleDialogClose(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].clearValidate()
      }
    },
    handleAdd() {
      this.showSelectOptionEdit = [{color: "primary"}]
      this.addDialogVisible = true
      this.projectTableFiledConfigPre = this.$deepClone(
          defaultProjectTableFiledConfigPre)
    },
    handleAddDialogConfirm() {
      this.$refs.addDialogRef.validate((valid) => {
        if (valid) {
          let arr = this.showSelectOptionEdit || []
          if (arr.length <= 0) {
            this.$message({
              message: "选项值必填!",
              type: 'error'
            })
            return false;
          } else {
            this.projectTableFiledConfigPre.showSelectOption = JSON.stringify(this.showSelectOptionEdit)
            projectTableFiledConfigPrePostRequire('add', this.projectTableFiledConfigPre).then(response => {
              if (response) {
                this.$message({
                  message: response.message,
                  type: response.status ? 'success' : 'error'
                })
              }
              this.addDialogVisible = false
            }).finally(() => {
              this.getList()
            })
          }
        }
      });
    },
    handleDelete(row) {
      this.$confirm('是否要删除该表字段映射字典?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        projectTableFiledConfigPrePostRequire('delete', {'id': row.id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(row) {
      this.editDialogVisible = true
      this.projectTableFiledConfigPre = this.$deepClone(row)
      this.showSelectOptionEdit = JSON.parse(this.projectTableFiledConfigPre.showSelectOption)
    },
    handleEditDialogConfirm() {
      this.$refs.editDialogRef.validate((valid) => {
        if (valid) {
          let arr = this.showSelectOptionEdit || []
          if (arr.length <= 0) {
            this.$message({
              message: "选项值必填!",
              type: 'error'
            })
            return false;
          } else {
            this.projectTableFiledConfigPre.showSelectOption = JSON.stringify(this.showSelectOptionEdit)
            projectTableFiledConfigPrePostRequire('update', this.projectTableFiledConfigPre).then(response => {
              if (response) {
                this.$message({
                  message: response.message,
                  type: response.status ? 'success' : 'error'
                })
              }
              this.editDialogVisible = false
            }).finally(() => {
              this.getList()
            })
          }
        }
      });
    },
    getList() {
      this.listLoading = true
      projectTableFiledConfigPrePostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data.records
        this.total = response.data.total
      })
    }
  }
}
</script>
<style>
.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
